﻿<UserControl x:Class="Kiosk.UserControls.LetterButton"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="UserControl_Loaded"
    Height="Auto" Width="Auto">
    <Canvas Name="cnvBG" Height="150" Background="Transparent" Width="115"  >
        <Canvas.Triggers>
            <EventTrigger RoutedEvent="Canvas.MouseEnter">
                <BeginStoryboard>
                    <Storyboard  FillBehavior="Stop" SlipBehavior="Grow">
                        <DoubleAnimation Storyboard.TargetName="stop1"
                            Storyboard.TargetProperty="Offset"
                            From="-.2" To="1" Duration="0:0:0.25" />

                        <DoubleAnimation Storyboard.TargetName="stop2"
                            Storyboard.TargetProperty="Offset"
                            From="-1" To="1.1" Duration="0:0:0.25"
                             />
                        <DoubleAnimation Storyboard.TargetName="stop3"
                            Storyboard.TargetProperty="Offset"
                            From="0" To="1.2" Duration="0:0:0.25"
                            />
                        
                        
                        
                        <DoubleAnimation From="1" To="1.3" Storyboard.TargetName="pathScale"
                                         Storyboard.TargetProperty="ScaleX" Duration="0:0:0.25"
                                         AutoReverse="True"/>
                        <DoubleAnimation From="1" To="1.3" Storyboard.TargetName="pathScale"
                                         Storyboard.TargetProperty="ScaleY" Duration="0:0:0.25"
                                         AutoReverse="True"/>
                        <DoubleAnimation From="1" To="1.3" Storyboard.TargetName="highScale"
                                         Storyboard.TargetProperty="ScaleX" Duration="0:0:0.25"
                                         AutoReverse="True"/>
                        <DoubleAnimation From="1" To="1.3" Storyboard.TargetName="highScale"
                                         Storyboard.TargetProperty="ScaleY" Duration="0:0:0.25"
                                         AutoReverse="True"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Canvas.Triggers>
        <Path Canvas.Top="0" HorizontalAlignment="Center" Name="pthLetter" Stroke="Black" StrokeThickness="2"  
          RenderTransformOrigin=".5,.5">
            <Path.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                   <GradientStop Color="#bdbdbd" Offset="0" />
                    <GradientStop Color="#4e4e4e" Offset="1" />
                </LinearGradientBrush>
            </Path.Fill>
            <Path.RenderTransform>
                <ScaleTransform x:Name="pathScale" ScaleX="1" ScaleY="1" />
            </Path.RenderTransform>
        </Path>
        <Path Canvas.Top="0" HorizontalAlignment="Center" Name="pthHighlight" 
        RenderTransformOrigin=".5,.5"  >
            <Path.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="Transparent" Offset="0" x:Name="stop1" />
                    <GradientStop Color="White" Offset="0" x:Name="stop2" />
                    <GradientStop Color="Transparent" Offset="0" x:Name="stop3" />
                 </LinearGradientBrush>
            </Path.Fill>
            <Path.RenderTransform>
                <ScaleTransform x:Name="highScale" ScaleX="1" ScaleY="1" />
            </Path.RenderTransform>
        </Path>
    </Canvas>
</UserControl>
  